{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}


<div class="row uinput-slider-container">
  {{#if label}}
  <div class="small-12 columns">
    <label for="input-{{sliderId}}">{{label}}</label>
  </div>
  {{/if}}
  <div class="large-8 small-6 columns">
    <input id="input-{{sliderId}}" type="range" class="uinput-slider"
      min="{{min}}" max="{{max}}" step="{{step}}" 
      value="{{initial}}" 
      list="uinput-list-{{sliderId}}"
      {{#if disabled}}disabled="true"{{/if}}/>
    <datalist id="uinput-list-{{sliderId}}">
    {{#each ticks}}
    <option>{{this}}</option>
    {{/each}}
    </datalist>
  </div>
  <div class="large-4 small-6 columns">
    <input type="number" class="uinput-slider-val" 
      min="{{min}}" max="{{max}}" step="{{step}}" 
      value="{{initial}}" 
      {{#unless wizard_field_disabled}}wizard_field="{{name}}"{{/unless}}
      {{#if disabled}}disabled="true"{{/if}} required/>
  </div>
</div>
